<template>
	<view class="ba-container">
		<view class="institution-info" style="display: flex;">
			<image :src="institutionData.image" style="flex-shrink: 0;"></image>
			<view style="margin-left: 10rpx;">
				<view style=" font-size: 18px;line-height: 28px; ">
					{{institutionData.name}}
				</view>
				<view style="display: flex; align-items: center;">
					<image src="/static/icons/localIcon.png" style="width: 36rpx;height: 30rpx;"></image>
					<span
						style="font-size: 12px;color: #999999;line-height: 27px; margin: 0 10rpx;white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 350rpx;">
						{{institutionData.address}}
					</span>
					<image src="/static/right.png" style="width: 14rpx;height:20rpx ;"></image>
				</view>
				<view style="display: flex;">
					<image src="/static/phone.png" class="info-icon" style="width: 48rpx; height: 48rpx;"></image>
					<image src="/static/music.png" class="info-icon"
						style="width: 48rpx; height: 48rpx;transform:scale(1.15) ;"></image>
				</view>
			</view>
		</view>
		<view class="">
			<view class="item-title">机构简介</view>
			<view style="color: #999999;line-height: 24px;font-size: 14px;">
				{{ institutionData.intro }}
			</view>
			<view class="item-title">医生团队</view>

			
			<template v-for="item in institutionData.teams">
				<navigator :url="`/nearbyinstitutions/pages/teamdetails/teamdetails?_id=${item._id}`">
				<view class="doctor-team">
					<view style="margin-right: 20rpx;">
						<image :src="item.avatar" style="width: 160rpx; height: 160rpx;"></image>
					</view>
					<view>
						<view class="">{{item.name}}</view>
						<view style="display: flex; align-items: center;
							">
							<span style="font-size: 12px;color: #999999;line-height: 27px; margin-right: 10rpx;
									white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
									display: inline-block; width: 400rpx;">
								{{item.organizationId.name}}
							</span>
							<image src="/static/right.png" style="width: 14rpx;height:20rpx ;"></image>
						</view>
						<view style="display: flex; align-items: center;">
							<template v-for="(temp,index) in 5">
								<image src="/static/sc.png" style="width: 28rpx;
									 height: 30rpx;" v-if="index<(item.rate-1)">
								</image>
								<image src="/static/kongsc.png" style="width: 28rpx; height: 30rpx;" v-else></image>
							</template>
							<span style="font-size: 12px;color: #FDDB78; line-height: 30rpx;
								margin-left: 20rpx;margin-top: 3px;">{{ item.rate }}.0</span>
						</view>
					</view>

				</view>
				</navigator>
			</template>



			<view class="item-title">服务包</view>
			<template v-for="item in institutionData.servicePacks">
				<view class="service-pack">
					<view style="margin-right: 20rpx;">
						<image :src="item.image" style="width: 160rpx; height: 160rpx;"></image>
					</view>
					<view style="flex: 1;">
						<view style="display: flex; justify-content: space-between;">
							<span>{{item.name}}</span>
							<view>
								<span style="color: #FA746B;line-height: 28px;font-size: 18px;">￥{{item.price}}</span>
							</view>
						</view>
						<template v-for="temp in item.tagIds">
							<span style="height: 48rpx;background-color: rgba(41, 132, 248, 0.2);
							    border: none;font-size: 12px;color: #2984F8; text-align: center;
								line-height: 48rpx; padding: 5rpx 10rpx; border-radius: 20px;"> {{temp.name}}</span>
						</template>
					</view>
					<view class=""></view>
				</view>
			</template>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getInstitutionByIdApi
	} from '../../../api/Institutionslist';
	import {
		ref
	} from 'vue';


	const institutionData = ref({});


	onLoad((options) => {
		getInstitutionById(options)
	})

	function getInstitutionById(id) {
		getInstitutionByIdApi(id).then(res => {
			if (res.code == 200) {
				institutionData.value = res.data;
			}
		})
	}
</script>

<style scoped lang="scss">
	.ba-container {
		min-height: 100vh;
		background-color: aliceblue;
		display: flex;
		flex-direction: column;
		padding: 40rpx;
	}

	.institution-info {
		image {
			width: 240rpx;
			height: 240rpx;
			border: 1px solid #eee;
			border-radius: 20px;
			display: flex;
		}
	}

	.info-icon {
		width: 12rpx;
		height: 12rpx;
		border-radius: 10px;
	}

	.item-title {
		font-weight: 500;
		font-size: 18px;
	}

	.doctor-team,
	.service-pack {
		width: 590rpx;
		height: 200rpx;
		background-color: #ffffff;
		border-radius: 22rpx;
		margin: 20rpx 0;
		display: flex;
		align-items: center;
		padding: 0 40rpx;
	}
</style>